{% extends "base.html" %}

{% block title %}{{ image.title }}{% endblock %}

{% block content %}
    <h1>{{ image.title }}</h1>
    {% load thumbnail %}
    {% thumbnail image.image "300" as im %}
    <a href="{{ image.image.url }}"><img src="{{ im.url }}" class="image-detail"></a>
    {% endthumbnail %}
    {% with total_likes=image.user_like.count %}
        <div class="image-info">
                <div>
                    <span class="count">
                        {{ total_likes }}like{{ total_likes|pluralize }}
                        <span class="total">{{ total_views }}</span>view{{ total_views|pluralize }}
                    </span>
                 </div>
                 {{ image.description|linebreaks }}
        <div class="image-likes">
            {% for user in image.user_like.all %}
                <div>
                    {#<img src="{{ user.profile.photo.url }}">#}
                    <p>{{ user.first_name }}</p>
                </div>
            {% empty %}
                Nobody likes this image yet.
            {% endfor %}
        </div>
    {% endwith %}
{% endblock %}